<template>
  <div class="checkVIP">
    <div class="mask"></div>
    <div class="checkVIPmain">
      <div>
        <p>查看会员信息</p>
        <i class="el-icon-close" @click="hanldeCloseVip"></i>
      </div>
      <div class="info">
        <span>
          <p>VIP：</p>
          <p>积分：</p>
          <p>手机：</p>
          <p>类型：</p>
          <p>建卡时间：</p>
          <p>末次消费余额:</p>
          <p>备注：</p>
        </span>
        <span style="margin-left: -56px">
          <p>{{ rowVIPData.name }}</p>
          <p>{{ rowVIPData.integralNumber }}</p>
          <p>{{ rowVIPData.phone }}</p>
          <p>{{ rowVIPData.type }}</p>
          <p>
            {{
              (rowVIPData.createTime && rowVIPData.createTime.substr(0, 10)) ||
              ''
            }}
          </p>
          <p>{{ rowVIPData.lastSellBalance }}</p>
          <p>{{ rowVIPData.remark }}</p>
        </span>
        <div>
          <p>姓名：{{ rowVIPData.name }}</p>
          <p>余额：{{ rowVIPData.balance }}</p>
          <p>折扣：{{ rowVIPData.discount }}</p>
          <p>生日：{{ rowVIPData.birthdayMonthe }}</p>
          <p>店铺名称：</p>
          <p>末次充值余额：{{ rowVIPData.lastRechargeBalance }}</p>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    rowVIPData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  methods: {
    hanldeCloseVip() {
      this.$emit('hanldeCloseVip')
    },
  },
}
</script>

<style scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 99;
}
.checkVIPmain {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  z-index: 99;
  background-color: white;
  overflow: auto;
}
.checkVIPmain > div:first-child {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: #f4f4f4;
  font-weight: 700;
}

.info {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}
span {
  width: 25%;
}
.info p {
  line-height: 4vh;
}
span:nth-child(odd) {
  text-align: right;
}
span:nth-child(even) {
  text-align: left;
}
</style>
